<template>
	<NavigationBar title="重置密码"></NavigationBar>
	<view class="reset-password_page">
		<view class="reset-password_steps">
			<van-steps :active="active">
				<van-step v-for="(i, j) in stepsList" :key="i">{{ i }}</van-step>
			</van-steps>
		</view>
		<view class="reset-password_form">
			<el-form
				label-width="0px"
				:model="verificationCodeForm"
				:rules="rules"
				class="login_form"
				ref="verificationCodeFormRef"
				v-if="active === 0"
			>
				<el-form-item prop="phone">
					<el-input
						v-model="verificationCodeForm.phone"
						placeholder="请输入手机号码"
						:prefix-icon="Iphone"
						size="large"
					/>
				</el-form-item>
				<el-form-item prop="validCode">
					<el-input
						v-model="verificationCodeForm.validCode"
						placeholder="请输入短信验证码"
						:prefix-icon="ChatDotSquare"
						size="large"
					>
						<template #append>
							<Captcha
								v-model:phone="verificationCodeForm.phone"
								@getCode="getCode"
								type="reset"
							/>
						</template>
					</el-input>
				</el-form-item>
				<el-button
					type="primary"
					class="w-full"
					size="large"
					@click="next(verificationCodeFormRef)"
				>
					下一步
				</el-button>
			</el-form>
			<el-form
				label-width="0px"
				:model="verificationCodeForm"
				:rules="rules"
				ref="formRef"
				v-else-if="active === 1"
			>
				<el-form-item prop="password">
					<el-input
						v-model="verificationCodeForm.password"
						placeholder="请设置6-20位登录密码"
						show-password
						:prefix-icon="Lock"
						size="large"
					/>
				</el-form-item>
				<el-form-item prop="newPassword">
					<el-input
						v-model="verificationCodeForm.newPassword"
						placeholder="请再次输入新的登录密码"
						show-password
						:prefix-icon="Lock"
						size="large"
					/>
				</el-form-item>
				<el-button
					type="primary"
					class="w-full"
					size="large"
					:loading="sureLoading"
					@click="sure(formRef)"
				>
					确定
				</el-button>
			</el-form>
			<view class="reset-password_success" v-else>
				<el-icon size="80" color="#409eff"><CircleCheck /></el-icon>
				<text class="success-text">密码重置成功</text>
				<text class="success-jump">将在{{ jumpTime }}后跳转登录页面</text>
				<el-button
					type="primary"
					style="width: 60%"
					size="large"
					@click="goHome"
				>
					去登录
				</el-button>
			</view>
		</view>
	</view>
</template>
<script setup>
import NavigationBar from "@/components/navigationBar";
import Captcha from "@/components/captcha";
import {
	validateMobile,
	validatePassword,
	validateNewPassword,
} from "@/utils/rules";
import { Iphone, ChatDotSquare, CircleCheck } from "@element-plus/icons-vue";
import { findPasswordByPhoneApi } from "../../api";
const useTabBar = useTabBarStore();
const sureLoading = ref(false);
// 步骤条
const stepsList = ref(["验证手机", "设置密码", "重置成功"]);
const active = ref(0);
// 手表单
const verificationCodeForm = ref({
	phone: "",
	validCode: "",
	password: "",
	newPassword: "",
});
const formRef = ref(null);
const verificationCodeFormRef = ref(null);
// 校验规则
const rules = {
	phone: [{ validator: validateMobile, trigger: "blur" }],
	validCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
	password: [{ validator: validatePassword, trigger: "blur" }],
	newPassword: [
		{
			validator: (rule, value, callback) =>
				validateNewPassword(
					rule,
					value,
					callback,
					verificationCodeForm.value.password,
				),
			trigger: "blur",
		},
	],
};

// 获取短信吗
const getCode = (res) => {
	verificationCodeForm.value.validCodeReqNo = res;
};
// 跳转首页倒计时
const jumpTime = ref(3);

// 下一步
const next = async (formEl) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			active.value = 1;
		}
	});
};
// 确定
const sure = async (formEl) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			try {
				sureLoading.value = true;
				await findPasswordByPhoneApi(verificationCodeForm.value);

				active.value = 2;
				let timer = setInterval(() => {
					jumpTime.value--;
					if (jumpTime.value === 0) {
						clearInterval(timer);
						goHome();
					}
				}, 1000);
			} catch (error) {
			} finally {
				sureLoading.value = false;
			}
		}
	});
};
const goHome = () => {
	uni.navigateTo({
		url: "/pages/login/index",
	});
};
</script>
<style lang="scss" scoped>
:deep(.van-steps) {
	background: none;
}
:deep(.van-step__circle-container) {
	background: none;
}
.reset-password_ {
	&steps {
		width: 80%;
		margin: 30rpx auto;
	}
	&form {
		width: 80%;
		margin: 50rpx auto;
	}
	&success {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;
		.success-text {
			color: $uni-text-color;
			font-size: 34rpx;
			font-weight: bold;
			line-height: 80rpx;
		}
		.success-jump {
			color: $uni-text-color-grey;
			font-size: 30rpx;
			line-height: 50rpx;
			margin-bottom: 50rpx;
		}
	}
}
</style>
